<template>
  <el-form ref="form" :model="form" label-width="80px" size="small">
    <el-tabs v-model="activeName">
      <el-tab-pane label="WGS-84坐标" name="first">
        <el-form-item label="坐标组">
          <el-input v-model="form.coordsFirst" type="textarea" rows="12" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="笛卡尔空间坐标" name="second">
        <el-form-item label="坐标组">
          <el-input v-model="form.coordsSecond" type="textarea" rows="12" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-form-item label="图片">
        <el-upload :on-change="handleChangeFile" :auto-upload="false" class="upload-demo" action="image/*">
          <el-button size="small" type="default">点击上传</el-button>
        </el-upload>
        <div style="color:#999;font-size:12px;text-align:left;line-height:16px">文件格式：jpg/png/gif/tif/tiff</div>
      </el-form-item>
      <el-form-item label="标记数字">
        <el-checkbox v-model="form.isSignNumber">是</el-checkbox>
      </el-form-item>
    </el-tabs>
    <div class="text-right">
      <el-button @click="run" type="primary" size="mini">标记</el-button>
      <el-button @click="clear" type="default" size="mini">清除</el-button>
    </div>
  </el-form>
</template>

<script>
import * as Cesium from 'cesium'
import { parser } from '@daelui/dogjs/dist/components.js'
import { Cartesian3_to_WGS84 } from '@/components/dogeo/cesium/transform.js'

export default {
  name: 'tool-sign',

  props: {
    viewer: {
      type: Object,
      default () {
        return null
      }
    }
  },

  data () {
    return {
      activeName: 'first',
      form: {
        coordsFirst: '[[116.3905,39.9084,100000]]',
        coordsSecond: '[[-2211741.6430,4457380.1988,4134345.3574]]',
        isSignNumber: false
      },
      entities: [],
      file: null,
    }
  },

  methods: {
    run () {
      if (!this.viewer) {
        return true
      }
      this.sign()
    },
    // 标记
    sign () {
      this.clear()
      let coords = []
      if (this.activeName === 'first') {
        let coordsFirst = parser.parse(this.form.coordsFirst)
        coordsFirst = Array.isArray(coordsFirst) ? coordsFirst : []
        if (coordsFirst.length < 1) {
          this.$message({
            type: 'warning',
            message: '请输入坐标'
          })
          return true
        }
        coords = coordsFirst
      } else {
        let coordsSecond = parser.parse(this.form.coordsSecond)
        coordsSecond = Array.isArray(coordsSecond) ? coordsSecond : []
        if (coordsSecond.length < 1) {
          this.$message({
            type: 'warning',
            message: '请输入坐标'
          })
          return true
        }
        coords = coordsSecond.map(item => {
          let point = Cartesian3_to_WGS84({
            x: item[0],
            y: item[1],
            z: item[2]
          })
          return [
            point.lng, point.lat, point.alt
          ]
        })
      }
      let defer = Promise.resolve(false)
      if (/\.gif|png|jpe?g|\.bmp|tif+/i.test((this.file||{}).name)) {
        defer = this.fileToBase64(this.file)
      }
      defer.then(text => {
        coords.forEach((item, i) => {
          let entity = this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2] || 0),
            // 广告牌
            billboard: {
              image: text || require('@/assets/images/digital_bg.png')
            },
            label: this.form.isSignNumber ? {
              text: i + 1 + '',
              pixelOffset: {
                x: 0,
                y: -32
              },
              fillColor: Cesium.Color.fromCssColorString('#fa9c2c')
            } : undefined
          })
          this.entities.push(entity)
        })
      })
    },
    handleChangeFile (file, fileslist) {
      if (fileslist.length > 1) {
        fileslist.shift()
      }
      this.file = file.raw
    },
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = (error) => reject(error)
      })
    },
    clear () {
      if (this.entities && this.entities.length) {
        this.entities.forEach(item => {
          this.viewer.entities.remove(item)
        })
        this.entities = []
      }
    }
  }
}
</script>